<template>
    <div>
        <!-- 外层容器 -->
        <el-container>
            <!-- 上半区域：顶栏 -->
            <el-header class="layout-header">
                <!-- 顶栏右侧的当前用户信息及下拉菜单 -->
                <div class="login-user">
                    <span class="welcome">欢迎回来，<b>{{ loginInfo.name }}</b>！</span>
                    <el-dropdown @command="handleCommand">
                        <el-avatar shape="square" size="medium"
                                   :src="loginInfo.avatar"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-document" command="personal">个人中心</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-right" divided command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <!-- 顶栏的标题文字 -->
                <h1>四叶草用户平台</h1>
            </el-header>
            <!-- 下半区域 -->
            <el-container class="layout-body">
                <!-- 下半区域的左侧边栏 -->
                <el-aside class="layout-aside">
                    <el-menu
                            router
                            default-active=""
                            class="el-menu-vertical-demo"
                            background-color="#27332e"
                            text-color="#fff"
                            active-text-color="#fff">
                        <!-- 主页 -->
                        <el-menu-item index="1" @click="goToHome">
                            <i class="el-icon-s-home"></i>
                            <span>主页</span>
                        </el-menu-item>
                        <el-menu-item @click="goToPrescription()">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">我的处方</span>
                        </el-menu-item>
                        <el-menu-item @click="goToMedicine()">
                            <i class="el-icon-user-solid"></i>
                            <span slot="title">药品订单</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <!-- 下半区域的右侧主体 -->
                <el-main class="layout-main">
                    <!-- 将由其它视图组件来负责此处的显示 -->
                    <router-view/>
                    <!-- 版权信息 -->
                    <div class="copyright">
                        <p>Copyright &copy; 四叶草时代科技集团</p>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style>
body {
    margin: 0;
}

.layout-header {
    background: #69bb55;
}

.layout-header .login-user {
    float: right;
    margin-top: 12px;
    display: flex;
}

.layout-header .login-user .welcome {
    line-height: 36px;
    color: #fff;
    margin-right: 10px;
}

.layout-header h1 {
    margin: 0;
    color: #fff;
    line-height: 60px;
    font-size: 20px;
}

.layout-body {
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
}

.layout-aside {
    background: #27332e;
}

.layout-aside .el-menu {
    border: 0;
}

.layout-aside i {
    color: #fff !important;
}

.layout-main {
    background: #f2f4f9;
}

.layout-main .body {
    background: #fff;
    padding: 30px 30px 10px 30px;
}

.layout-main .copyright {
    width: 600px;
    margin: 0 auto;
    padding: 10px;
}

.layout-main .copyright p {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 12px;
    color: #9e9e9f;
}

.el-menu-item.is-active {
    background: #505956 !important;
}
</style>

<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
    data(){
        return{
            loginInfo:[]

        }
    },
    methods: {
        goToHome(){
            this.$router.push('/home');
        },
        goToPrescription() {
            if (this.$route.path !== '/order/user/prescription')
                this.$router.push('/order/user/prescription');
        },
        goToMedicine() {
            if (this.$route.path!=='/order/user/medicine') {
                this.$router.push('/order/user/medicine');
            }
        },
        handleCommand(command) {
            if (command === 'personal') {
                this.$router.push('/personal/user')
            } else if (command === 'logout') {
                this.openLogoutConfirm();
            }
        },
        openLogoutConfirm(){
            let message = '即将退出登录，是否继续？';
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.handleLogout();
            }).catch(() => {
            });
        },
        handleLogout(){
            let url = BaseUrl.PASSPORT + '/passport/users/logout';
            console.log('url = ' + url);

            TokenAxios.post(url).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.state === 20000) {
                    this.$message({
                        message: '退出登录成功！',
                        type: 'success'
                    });
                    localStorage.removeItem('loginInfo');
                    this.$router.push('/home');
                } else {
                    this.$alert(jsonResult.message, '错误', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                    });
                }
            });
        },
        loadCurrentLoginInfo(){
          let loginInfoString=localStorage.getItem('loginInfo')

          this.loginInfo = JSON.parse(loginInfoString);
          if (!this.loginInfo) {
            this.$router.push('/login/user');
            return;
          }else if (this.loginInfo.role!==1&&this.loginInfo.role!==2){
            this.$message.error('无权访问');
            this.$router.push('/home');
            return;
          }
        },

    },
    created() {
    },
    mounted() {
        this.loadCurrentLoginInfo();
    }
}
</script>